<template>
		<modal :show="popup" :maskClosable="false">
			<view class="flex flex-direction align-center">
				<view class="title">{{title}}</view>
				<slot></slot>
			</view>
		</modal>
</template>

<script>
	import Modal from "@/components/popup-layer/modal.vue"
	import PopupLayer from "@/components/popup-layer/popup-layer.vue"
	export default {
		components: {
			PopupLayer,
			Modal
		},
		props: {
			title: { 
				type: String,
				default: '购买须知'
			},
			top: {
				type: String,
				default: '20'
			}
		},
		data() {
			return {
				popup: false
			};
		},
		computed: {
			marginTop() {
				return `margin-top:${this.top}%`
			}
		},
		methods: {
			show() {
				this.popup = true
			},
			close() {
				this.popup = false
			},
		}
	}
</script>

<style lang="scss">
.containers{
	display: flex;
	justify-content: center;
}

.title{
		padding-bottom: 30upx;
		text-align: center;
		font-size: 36upx;
		color: #000;
		font-weight: bold;
	}
</style>
